<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>07_component_refs</title>
</head>
<body>
<br>
<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    /*
    需求: 自定义组件, 功能说明如下:
      1. 界面如果页面所示
      2. 点击按钮, 提示第一个输入框中的值
      3. 当第2个输入框失去焦点时, 提示这个输入框中的值
   */

    class MyComponent extends React.Component {
        constructor(props) {
            super(props);

            // 函数初始化
            this.handleBlur = this.handleBlur.bind(this);
            this.handleClick = this.handleClick.bind(this);
        }

        handleClick() {
            // 弹出
            alert(this.msgInput.value);
            // 清空文本框的值
            this.msgInput.value = '';
        }

        handleBlur(event) {
            alert(event.target.value);
        }

        render() {
            return (
                <div>
                    <input ref={input => this.msgInput = input}/>&nbsp;&nbsp;
                    <button onClick={this.handleClick}>提示输入的内容</button>
                    &nbsp;&nbsp;
                    <input placeholder="失去焦点的内容" onBlur={this.handleBlur}/>
                </div>
            );
        }
    }

    // 渲染组件标签
    ReactDOM.render(<MyComponent/>, document.getElementById("example"));
</script>